<template>
  <div class="dh-field">
    <div class="van-hairline--bottom">
      <van-field
        v-model="resultLabel"
        v-bind="$attrs"
        readonly
        is-link
        error-message-align="right"
        input-align="right"
        class="dh-cell"
        @click="showPopu($attrs.disabled)"
        type="textarea"
        autosize
        rows="1" />
      <van-popup v-model="show" position="bottom" class="" get-container="#app">
        <div class="van-picker__toolbar">
          <button type="button" class="van-picker__cancel" @click="cancel">取消</button>
          <div class="van-ellipsis van-picker__title">{{ $attrs.label }}</div>
          <button type="button" class="van-picker__confirm" @click="onConfirm">确认</button>
        </div>
        <div class="select_box">
          <van-field v-if="isSearch" v-model="searchVal" input-align="left" placeholder="搜索" @input="search" />
          <van-cell v-if="isCheckAll" title="全选" class="check_all">
            <template #right-icon>
              <van-checkbox v-model="checkedAll" name="all" @click="toggleAll" />
            </template>
          </van-cell>
          <van-checkbox-group ref="checkboxGroup" v-model="checkboxValue" @change="change" class="check_box">
            <van-cell-group>
              <van-cell
                v-for="(item, index) in columnsData"
                :key="item[option.value]"
                :title="getTitle(item)"
                clickable
                @click="toggle(index)"
                class="check_box_li">
                <template #right-icon>
                  <van-checkbox ref="checkboxes" :name="item[option.value]" :disabled="dealDisable(item)" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VanFieldCheckbox',
  model: {
    prop: 'selectValue',
  },
  props: {
    columns: {
      type: Array,
      default: () => {
        return []
      },
    },
    selectValue: {
      type: Array,
      default: () => {
        return []
      },
    },
    disableValue: {
      type: Array,
      default: () => {
        return []
      },
    },
    option: {
      type: Object,
      default: () => {
        return { label: 'label', value: 'value', label1: 'label1' }
      },
    },
    // 是否支持搜索
    isSearch: {
      type: Boolean,
      default: false,
    },
    // 是否支持全选
    isCheckAll: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    resultLabel: {
      get() {
        const res = this.columns.filter(item => {
          return this.selectValue.indexOf(item[this.option.value]) > -1
        })
        const resLabel = res.map(item => {
          let str = ''
          if (item[this.option.label1]) {
            str = item[this.option.label] + '（' + item[this.option.label1] + '）'
          } else {
            str = item[this.option.label]
          }
          return str
        })
        return resLabel.join(',')
      },
      set() {},
    },
  },
  watch: {
    selectValue: {
      handler(news) {
        this.resultValue = news
      },
      deep: true,
      immediate: true,
    },

    resultValue: {
      handler(news) {
        this.searchVal = ''
        this.columnsData = JSON.parse(JSON.stringify(this.columns))
        this.$emit('input', news)
      },
      deep: true,
    },
    columnsData: {
      handler(val) {
        if (val.length && val.length === this.checkboxValue.length) {
          this.checkedAll = true
        } else {
          this.checkedAll = false
        }
      },
      immediate: true,
    },
    checkboxValue: {
      handler(val) {
        if (val.length && val.length === this.columnsData.length) {
          this.checkedAll = true
        } else {
          this.checkedAll = false
        }
      },
      immediate: true,
    },
    disableValue: {
      handler(news) {
        this.disabledList = news
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      show: false,
      searchVal: '',
      columnsData: JSON.parse(JSON.stringify(this.columns)),
      checkboxValue: JSON.parse(JSON.stringify(this.selectValue)),
      checkedAll: false,
      resultValue: JSON.parse(JSON.stringify(this.selectValue)),
      disabledList: [],
    }
  },
  methods: {
    // 搜索
    search(val) {
      if (val) {
        this.columnsData = this.columnsData.filter(item => {
          return item[this.option.label].includes(val)
        })
      } else {
        this.columnsData = JSON.parse(JSON.stringify(this.columns))
      }
    },
    getData(val) {
      const res = this.columnsData.filter(item => {
        return val.indexOf(item[this.option.value]) > -1
      })
      return res
    },
    onConfirm() {
      this.resultValue = this.checkboxValue
      this.show = !this.show
      this.$emit('confirm', this.resultValue, this.getData(this.resultValue))
    },
    change(val) {
      this.$emit('change', val, this.getData(this.resultValue))
    },
    cancel() {
      this.show = !this.show
      this.$emit('cancel', this.resultValue)
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle()
    },
    toggleAll(all) {
      this.$refs.checkboxGroup.toggleAll(this.checkedAll)
    },
    showPopu(disabled) {
      this.columnsData = JSON.parse(JSON.stringify(this.columns))
      this.checkboxValue = JSON.parse(JSON.stringify(this.selectValue))
      this.resultValue = JSON.parse(JSON.stringify(this.selectValue))
      if (disabled !== undefined && disabled !== false) {
        return false
      } else {
        this.show = !this.show
      }
    },
    dealDisable(item) {
      if (this.disabledList.includes(item[this.option.value])) {
        return true
      } else {
        return false
      }
    },
    getTitle(item) {
      let str = ''
      if (item[this.option.label1]) {
        str = item[this.option.label] + '（' + item[this.option.label1] + '）'
      } else {
        str = item[this.option.label]
      }
      return str
    },
  },
}
</script>

<style lang="scss" scoped>
.dh-field {
  padding: 0;
  background: #fff;
  /deep/.van-hairline--bottom::after {
    border-bottom: none !important;
  }
  .dh-cell.van-cell {
    // padding: 10px 0;
  }
  .dh-cell.van-cell--required::before {
    left: -8px;
  }
}
.van-popup {
  border-radius: 20px 20px 0 0;
}
.select_box {
  min-height: 50vh;
  height: 50vh;
  overflow-y: auto;
  padding: 0 16px 16px;
  .check_all {
    padding: 10px 0;
  }
  .check_box_li {
    padding: 10px 0;
  }
}
</style>
